<template>
  <el-dialog
    v-model="state.show"
    :title="'订舱单位联系'"
    width="1021px"
    modal-class="doc-contact-link"
  >
    <div style="height: 100%">
      <el-form :model="state.detailData" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订舱人" prop="doccode">
              <el-input
                v-model="detailData.createBy"
                disabled
                placeholder="下单账号名称"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input
                v-model="state.addContactLink.telephone"
                placeholder="请输入"
                @change="
                  state.addContactLink.telephone = validataPhoneAndTelephone(
                    state.addContactLink.telephone
                  )
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input
                v-model="state.addContactLink.mail"
                placeholder="请输入"
                @change="
                  state.addContactLink.mail = checkEmailIsRIght(
                    state.addContactLink.mail
                  )
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="抄送邮箱">
              <el-input
                v-model="state.addContactLink.ccMail"
                placeholder="请输入"
                @change="
                  state.addContactLink.ccMail = checkEmailAllIsRIght(
                    state.addContactLink.ccMail
                  )
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 28px">
            <span style="color: #00000066; line-height: 24px; font-size: 12px"
              >若需抄送多个邮箱，请用 / 进行区分</span
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div>
        <el-button type="default" @click="state.show = false">取消</el-button>
        <el-button type="primary" @click="modifySubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineComponent, reactive } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import request from '@/public/request'
import { useRouter, useRoute } from 'vue-router'
import vueBus from '@/utils/vueBus'
import {
  validateOnlyNumberTwo,
  validateNumber,
  checkEmailType,
  validataPhoneAndTelephone
} from '@/utils/validate.js'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => {}
  }
})

const Router = useRouter()
const Route = useRoute()

defineExpose({
  open
})

const emit = defineEmits(['refresh'])

// 检验邮箱是否正确
function checkEmailIsRIght(email) {
  if (!checkEmailType(email)) {
    return ''
  }
  return email
}

// 校验邮箱多个邮箱是否正确:输入的所有数据
function checkEmailAllIsRIght(val) {
  const emailList = val ? val.split('/') : []
  let checkEmailArray = []
  for (const iterator of emailList) {
    if (checkEmailType(iterator)) {
      checkEmailArray.push(iterator)
    }
  }
  return checkEmailArray.join('/')
}

const state = reactive({
  show: false,
  addContactLink: {}
})

// 打开联系人弹框页面
function open() {
  state.show = true
  state.addContactLink = {
    bookingId: Route.query.id,
    telephone: props.detailData.telephone,
    mail: props.detailData.mail,
    ccMail: props.detailData.ccMail
  }
}

// 新增
async function modifySubmit() {
  let res = await request.post(
    '/api/sebooking/modifybookingperson',
    state.addContactLink
  )
  if (res.status) {
    ElMessage.success('成功')
    vueBus.emit('refreshBussiness' + Route.query.id, '')
    // emit('refresh')
    state.show = false
  } else {
    ElMessage.warning(res.message)
  }
}
</script>

<style lang="scss">
.doc-contact-link {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 16px 7px 16px;
  }

  .el-dialog {
    min-width: 630px;
    padding: 0px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.from-container {
  border: 1px solid #e8e8e8;
  padding: 6px;
  margin-bottom: 8px;
}

:deep(.el-form-item--small .el-form-item__label) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
  margin-right: 0;
}

:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 8px;
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
}
</style>
